<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>大学生 信息管理</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" th:href="@{/layui/css/font.css}">
    <link rel="stylesheet" th:href="@{/layui/css/xadmin.css}">
    <script charset="utf-8" th:src="@{/layui/lib/layui/layui.js}"></script>
    <script th:src="@{/layui/js/xadmin.js}" type="text/javascript"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-col-space5 layui-form">
                        <div class="layui-input-inline layui-show-xs-block">
                            <label>
                                <input autocomplete="off" class="layui-input" id="studentName"
                                       name="studentName" placeholder="请输入姓名" type="text">
                            </label>
                        </div>
                        <div class="layui-input-inline">
                            <label>
                                <select id="majorName" name="major.id">
                                    <option value="请选择">请选择主修专业名称</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-input-inline">
                            <label>
                                <select id="cityName" name="city.id">
                                    <option value="请选择">请选择所在地区</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn icon-btn" id="reset">
                                <i class="layui-icon">&#xe669;</i>
                            </button>
                            <button class="layui-btn" data-type="reload">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body ">
                    <label><input hidden id="universityId" th:value="${university.id}"></label>
                    <table class="layui-table layui-form" id="studentMessage"
                           lay-filter="table">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use([ 'form', 'layer', 'table' ], function() {
        const table = layui.table, form = layui.form, $ = layui.$;
        const universityId = document.getElementById("universityId").value;
        //执行一个laydate实例
        table.render({
            elem : '#studentMessage', //指定元素
            url : '/university_student_pt_list?universityId=' + universityId,
            // toolbar: '#toolbarDemo',
            id : 'list',
            page : {
                layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ],
                groups : 1,
                first : false,
                last : false
            },
            cols : [ [ //表头
                {type : 'checkbox'},
                {field : 'portrait', title : '头像', minWidth : 100, align: "center",
                    templet:'#img'},
                {field : 'studentName', title : '姓名', minWidth : 100, align: "center", sort : true},
                {field : 'company', title : '兼职公司名称', minWidth : 150, align: "center", sort : true,
                    templet:'<div>{{d.company.companyName}}</div>'},
                {field : 'gender', title : '性别', minWidth : 80, align: "center", sort : true},
                {field : 'politics', title : '政治面貌', minWidth : 120, align: "center", sort : true,
                    templet : '<div>{{d.politics.politicsType}}</div>'},
                {field : 'university', title : '就读大学', minWidth : 150, align: "center", sort : true,
                    templet:'<div>{{d.university.universityName}}</div>'},
                {field : 'major', title : '主修专业', minWidth : 180, align:"center", sort : true,
                    templet:'<div>{{d.major.majorName}}</div>'},
                {field : 'bornDate', title : '出生日期', minWidth : 180, align:"center", sort : true},
                {field : 'graduateDate', title : '毕业年月', minWidth : 120, align:"center", sort : true},
                {field : 'email', title : '邮箱地址', minWidth : 180, align:"center"},
                {field : 'phone', title : '联系方式', minWidth : 150, align:"center", sort : true},
                {field : 'city', title : '所在地区', minWidth : 150, align:"center", sort : true,
                    templet:'<div>{{d.city.cityName}}</div>'},
                {fixed : 'right', title : '操作', toolbar : '#barDemo', align:"center", minWidth : 200}
            ] ]
        });
        // 查询信息
        const active = {
            reload: function(){
                const studentName = $('#studentName');
                //外键为各自id
                const majorName = $('#majorName');
                const cityName = $('#cityName');
                //执行重载
                table.reload('list', {
                    page: {
                        //重新从第 1 页开始
                        curr: 1
                    }
                    ,where: {
                        studentName: studentName.val(),
                        majorName: majorName.val(),
                        cityName: cityName.val()
                    }
                }, 'data');

            }
        };
        $('.layui-card-body .layui-btn').on('click', function(){
            const type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //重置按钮
        $("#reset").on("click",function () {
            location.reload();
        });
        // 获取下拉框信息 (专业信息)
        $.get("/major_option_message",{},function (data) {
            let list = data;
            const select = document.getElementById('majorName');
            if (list != null) {
                for (let c in list) {
                    let option = document.createElement("option");
                    option.setAttribute("value", list[c].id);
                    option.innerText = list[c].majorName;
                    select.appendChild(option)
                }
            }
            form.render('select');
        },"json");
        // 获取下拉框信息 (市级信息)
        $.get("/city_option_message",{},function (data) {
            let list = data;
            const select = document.getElementById('cityName');
            if (list != null) {
                for (let c in list) {
                    let option = document.createElement("option");
                    option.setAttribute("value", list[c].id);
                    option.innerText = list[c].cityName;
                    select.appendChild(option)
                }
            }
            form.render('select');
        },"json");
        //监听行工具事件
        table.on('tool(table)', function(obj){
            switch (obj.event) {
                case 'resume':
                    xadmin.open('查看学生的简历信息','/admin_user_student_resume_message?id='+obj.data.id,null,null,false)
                    break;
                case 'companyMessage':
                    xadmin.open('查看公司基本信息','/university_student_pt_company_message?id='+obj.data.id,null,null,false)
                    break;
            }
        });
    });
</script>
<script id="img" type="text/html">
    <img src="{{d.portrait}}" alt="这是头像" height="24px" width="24px" onclick="bigPicture(this)">
</script>
<script>
    function bigPicture(e) {
        let Width = e.width;
        let Height = e.height;
        let scaleWH = Width / Height;
        let bigH = 400;
        let bigW = scaleWH * bigH;
        if (bigW > 1000) {
            bigW = 1000;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true, //点击阴影关闭
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: "<img width='100%' height='100%' alt='放大的头像' src=" + $(e).attr('src') + " />"
        });
    }
</script>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="resume">查看简历</a>
    <a class="layui-btn layui-btn-xs" lay-event="companyMessage">查看公司</a>
</script>
</body>
</html>